<template>
  <!-- 导入表 -->
  <div class="app-container">
    <v-row justify="center">
      <v-dialog v-model="visible"
              transition="dialog-bottom-transition"
              width="800px">

        <v-card>
          <!-- 对话框标题 -->
          <v-card-title>
            <span style="font-size: 18px">导入表</span>
          </v-card-title>
          <v-col>
            <!-- 搜索表单 -->
            <v-form ref="queryForm" label-width="68px">
              <v-row>
                <v-col md="4">
                  <v-text-field
                    label="表名称"
                    v-model="queryParams.tableName"
                    placeholder="请输入表名称"
                    outlined
                    dense
                    clearable
                    hide-details="auto"
                    @keyup.enter.native="handleQuery"
                    style="width: 240px;"
                  ></v-text-field>
                </v-col>
                <v-col md="4">
                  <v-text-field
                    label="表描述"
                    v-model="queryParams.tableComment"
                    placeholder="请输入表描述"
                    outlined
                    dense
                    clearable
                    hide-details="auto"
                    @keyup.enter.native="handleQuery"
                    style="width: 240px;"
                  ></v-text-field>
                </v-col>
                <!-- 按钮区-->
                <v-col
                       md="3" style="padding-bottom: 0;margin-left: 0;height: 40px;margin-top: 4px">
                  <p style="display: inline-block;position: absolute">
                    <v-btn
                      small color="primary"
                      @click="handleQuery">
                      <v-icon left>
                        mdi-magnify
                      </v-icon>
                      搜索
                    </v-btn>
                    <v-btn
                      small
                      @click="resetQuery"
                      style="margin-left: 10px"
                    >
                      <v-icon left>
                        mdi-autorenew
                      </v-icon>
                      重置
                    </v-btn>
                  </p>
                </v-col>
              </v-row>
            </v-form>

            <v-main>
              <v-data-table v-if="dbTableList"
                            v-model="tables"
                            :headers="headers"
                            :items="dbTableList"
                            :items-per-page="queryParams.pageSize"
                            hide-default-footer
                            :loading="loading"
                            loading-text="加载中,请稍后.."
                            show-select
                            item-key="tableName"
                            class="elevation-1"
                            no-data-text="暂无数据"
              >
              </v-data-table>
              <!-- 外部分页-->
              <div class="d-flex align-center justify-end text-center">
                <div class="d-flex" style="margin-top: 3px;font-size: 14px;font-weight: 400">
                  <span>每页</span>
                  <v-select
                    v-model="queryParams.pageSize"
                    :items="numbers"
                    dense
                    @change="getList" style="max-width: 80px;max-height: 20px;margin-top: -4px;text-align: center;">
                    <template v-slot:selection="{ item, index }">
                  <span style="width: 100%">
                    {{item}}
                  </span>
                    </template>
                  </v-select>
                  <span>条记录</span>
                </div>
                <v-pagination
                  v-model="queryParams.pageNum"
                  @input="getList"
                  :length="queryParams.totalPages"
                  :total-visible="7"
                ></v-pagination>
              </div>
            </v-main>
          </v-col>

          <!-- 底部操作按钮 -->
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              text
              @click="visible = false;">
              取消
            </v-btn>
            <v-btn
              color="blue darken-1"
              text
              @click="handleImportTable()">
              确定
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </div>
  <!--<el-dialog title="导入表" :visible.sync="visible" width="800px" top="5vh" append-to-body v-if="false">-->
  <!--  <el-form :model="queryParams" ref="queryForm" :inline="true">-->
  <!--    <el-form-item label="表名称" prop="tableName">-->
  <!--      <el-input-->
  <!--        v-model="queryParams.tableName"-->
  <!--        placeholder="请输入表名称"-->
  <!--        clearable-->
  <!--        size="small"-->
  <!--        @keyup.enter.native="handleQuery"-->
  <!--      />-->
  <!--    </el-form-item>-->
  <!--    <el-form-item label="表描述" prop="tableComment">-->
  <!--      <el-input-->
  <!--        v-model="queryParams.tableComment"-->
  <!--        placeholder="请输入表描述"-->
  <!--        clearable-->
  <!--        size="small"-->
  <!--        @keyup.enter.native="handleQuery"-->
  <!--      />-->
  <!--    </el-form-item>-->
  <!--    <el-form-item>-->
  <!--      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
  <!--      <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
  <!--    </el-form-item>-->
  <!--  </el-form>-->
  <!--  <el-row>-->
  <!--    <el-table @row-click="clickRow" ref="table" :data="dbTableList" @selection-change="handleSelectionChange" height="260px">-->
  <!--      <el-table-column type="selection" width="55"></el-table-column>-->
  <!--      <el-table-column prop="tableName" label="表名称" :show-overflow-tooltip="true"></el-table-column>-->
  <!--      <el-table-column prop="tableComment" label="表描述" :show-overflow-tooltip="true"></el-table-column>-->
  <!--      <el-table-column prop="createTime" label="创建时间"></el-table-column>-->
  <!--      <el-table-column prop="updateTime" label="更新时间"></el-table-column>-->
  <!--    </el-table>-->
  <!--    <pagination-->
  <!--      v-show="total>0"-->
  <!--      :total="total"-->
  <!--      :page.sync="queryParams.pageNum"-->
  <!--      :limit.sync="queryParams.pageSize"-->
  <!--      @pagination="getList"-->
  <!--    />-->
  <!--  </el-row>-->
  <!--  <div slot="footer" class="dialog-footer">-->
  <!--    <el-button type="primary" @click="handleImportTable">确 定</el-button>-->
  <!--    <el-button @click="visible = false">取 消</el-button>-->
  <!--  </div>-->
  <!--</el-dialog>-->
</template>

<script>
import { listDbTable, importTable } from "@/api/tool/gen";
export default {
  data() {
    return {
      loading: false,
      // 遮罩层
      visible: false,
      // 选中数组值
      tables: [],
      // 总条数
      total: 0,
      // 表数据
      dbTableList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        totalPages: 0, // 总页数
        tableName: undefined,
        tableComment: undefined
      },
      // v-table 表格头
      headers: [
        { text: '表名称', value: 'tableName', sortable: false, align: 'center' },
        { text: '表描述', value: 'tableComment', sortable: false, align: 'center' },
        { text: '创建时间', value: 'createTime', sortable: false, align: 'center' },
        { text: '更新时间', value: 'updateTime', sortable: false, align: 'center' },
      ],
      numbers: [10, 15, 20, 50, 100], // 每页条数选择
    };
  },
  methods: {
    // 显示弹框
    show() {
      this.getList();
      this.visible = true;
    },
    clickRow(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.tables = selection.map(item => item.tableName);
    },
    // 查询表数据
    getList() {
      this.loading = true;
      listDbTable(this.queryParams).then(res => {
        if (res.code === 200) {
          this.dbTableList = res.rows;
          this.total = res.total;
          this.queryParams.totalPages = Math.ceil(this.total / this.queryParams.pageSize);
          this.$nextTick(() => {
            this.loading = false;
          })
        }
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.queryForm.reset(); // 重置
      this.handleQuery();
    },
    /** 导入按钮操作 */
    handleImportTable() {
      const tables = this.tables.map(item => item.tableName)
      importTable({ tables: tables.toString() }).then(res => {
        this.$store.dispatch('snackbar/openSnackbar', {
          msg: res.msg,
          color: 'success'
        })
        if (res.code === 200) {
          this.tables = [];
          this.visible = false;
          this.$emit("ok");
        }
      });
    }
  }
};
</script>
